<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <div class="jzrglk">
        <div>就诊人管理</div>
        <div>
          <el-button type="primary" @click="xz(0)">新增就诊人</el-button>
        </div>
      </div>
      <div class="jiuzhenrenmp">
        <div
          class="mplist"
          v-for="(item, index) in list"
          @click="handle(item, index)"
          :key="index"
        >
          <div class="mptop">
            <div>{{ item.name }}</div>
            <div>
              <el-button type="primary" @click="xz(item)">编辑</el-button>
              <el-button type="danger" @click="delete1(item)">删除</el-button>
            </div>
          </div>
          <div class="mpbottom">
            <div>证件类型:{{ item.param.certificatesTypeString }}</div>
            <div>证件号码:{{ item.contactsCertificatesNo }}</div>
            <div>
              用户性别:<span v-if="item.sex == 0">男</span
              ><span v-else>女</span>
            </div>
            <div>出生日期:{{ item.birthdate }}</div>
            <div>手机号码:{{ item.phone }}</div>
            <div>
              婚烟状况:<span v-if="item.isMarry == 1">未婚</span
              ><span v-else>已婚</span>
            </div>
            <div>当前住址:{{ item.address }}</div>
         
          </div>
          <div class="yxz" v-show="item.sfxz">已选择</div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { ElMessageBox  } from "element-plus";
import { useRouter } from "vue-router";
import instance from "../assets/axios";
const list = ref([]);
const obj = ref({});
const router = useRouter();
const ids = ref("");
const obj1 = ref({});
const getlist = async () => {
  const res = await instance.get("/api/user/patient/auth/findAll");
  list.value = res.data;

  list.value.forEach((el) => {
    el.sfxz = false;
  });
  console.log(res);
};
const delete1=(e)=>{
     ElMessageBox.confirm(
    '是否确认删除',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async() => {
     const res=await instance.delete(`/api/user/patient/auth/remove/${e.id}`);
     console.log(res)
     getlist()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
const xz = (e) => {
  router.push({
    path: "xzjzr",
    query:{
id:e.id,
item:JSON.stringify(e)
    }
  });
};
onMounted(() => {
  getlist();
});
</script>

<style scoped>
.yxz {
  position: absolute;
  width: 200px;
  height: 200px;
  color: red;
  border-radius: 50%;
  border: 1px dashed red;
  text-align: center;
  line-height: 200px;
  left: 20%;
  top: 20%;
  opacity: 0.5;
  transform: rotate(35deg);
  font-weight: 900;
}
.mpbottom div {
  margin-bottom: 15px;
}
.mpbottom {
  width: 100%;
  height: auto;
  padding: 15px;
  box-sizing: border-box;
}
.mptop {
  width: 100%;
  display: flex;
  padding: 0px 20px;
  box-sizing: border-box;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  background: #e5e5e5;
}
.mplist {
  width: 32%;
  border: 1px solid #e5e5e5;
  position: relative;
  height: auto;
    margin-right: 10px;
}
.jiuzhenrenmp {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.jzrglk {
  width: 100%;
  height: auto;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  border-bottom: 1px solid #f7f7f7;
  align-content: center;
}
.qrghxx {
  font-weight: 900;
  color: #7f7f7f;
  font-size: 20px;
  margin-bottom: 10px;
}
</style>